<html><head><title>prefuse introduction &gt; toolkit structure</title></head><body><div id='tit'>prefuse introduction &gt; toolkit structure</div><div id='cate'>源码品读</div><div id='date'>2009年08月16日 星期日 09:31 P.M.</div><div id='page'>37</div><a id='url' href='http://hi.baidu.com/hxzon/blog/item/c350573d97d0e3e73d6d9798.html'>http://hi.baidu.com/hxzon/blog/item/c350573d97d0e3e73d6d9798.html</a><div id='cnt'><h1 class="pagetitle">prefuse introduction &gt; toolkit structure</h1> 
<p class="entry">The design of the prefuse toolkit is based upon the <em>information visualization reference model</em>, a software architecture pattern that breaks up the visualization process into a series of discrete steps [<a name="fn1-src"></a><a href="http://prefuse.org/doc/manual/introduction/structure/#fn1">1</a>], from data acquisition and modeling to the visual encoding of data to the presentation of interactive displays. This process is illustrated in the figure below.</p> 
<div class="entry"> 
 <div style="width: 600px" class="manual-figure">
  <img src="image/prefuse introduction.5bf89e224c1436b4d6cae268.jpg" />
  <p class="origImg">http://hiphotos.baidu.com/hxzon/pic/item/5bf89e224c1436b4d6cae268.jpg</p>
  <br /> 
  <strong>Figure.</strong> Diagram depicting the information visualization reference model. Source data is mapped into data tables that back a visualization. These backing data tables are then used to construct a visual abstraction of the data, modeling visual properties such as position, color, and geometry. The visual abstraction is then used to create interactive views of the data, with user interaction potentially affecting change at any level of the framework.
 </div> 
</div> 
<div class="entry"> 
 <ul class="manual"> 
  <li>The first step is the collection of the <em>source data</em> to visualize. This could be a table of figures, a social network graph, a file directory structure, or any other data set.</li> 
  <li>This source data is then used to construct <em>data tables</em>, internal representations of the data as it is to be visualized. The process of going from source data to data tables might only involve reading in the data from a formatted file or database, but could potentially involve any number of data transformations.</li> 
  <li>The resulting data tables (which, despite the name, can also represent networked data structures such as graphs and trees) are then subject to <em>visual mappings</em> to create a <em>visual abstraction</em>, a data model that includes visual features such as spatial layout, color, size, and shape. The visual abstraction is responsible for containing all the information needed to draw a visual representation of the data.</li> 
  <li>The actual rendering of the data in the visual abstraction is done through a process of <em>view transformations</em>, in which rendering components draw the contents of the visual abstraction into any number of interactive <em>views</em>. These views can provide varying perspectives onto the data, for example by supporting panning and zooming operations to hone-in on specific regions, or by using an array of &quot;small multiples&quot; displays to show different snapshots of a fluctuating data variable.</li> 
  <li>User interaction with the visualization (most commonly through mouse and keyboard input) can feedback into this process, causing changes or updates at any stage of the visualization pipeline. Examples include dragging an item, zooming into a view, or opening a different data file.</li> 
 </ul> 
</div> 
<p>The reference model described above is quite similar to the popular <em>model-view-controller</em> design pattern for implementing user interfaces. This pattern breaks up a user interface component (e.g., a slider or combo box) into</p> 
<ul> 
 <li>a model containing backing data values</li> 
 <li>one or more views displaying the contents of this model, and</li> 
 <li>controllers for processing user input and appropriately updating the model and view in response.</li> 
</ul> The information visualization reference model extends this common pattern by adding an additional level. The data tables serve as a baseline data model which can back any number of visualizations, with each visual abstraction serving as a visualization-specific model with its own set of views and controllers. 
<p>The figure below illustrates how the different packages and classes of the prefuse toolkit implement the information visualization reference model, providing support for each stage of the visualization pipeline.</p> 
<div style="width: 642px" class="manual-figure">
 <a href="http://prefuse.org/doc/manual/introduction/structure/package_guide_full.gif"><img src="image/prefuse introduction.1c607dcb485cc858bf09e668.jpg" /><p class="origImg">http://hiphotos.baidu.com/hxzon/pic/item/1c607dcb485cc858bf09e668.jpg</p></a>
 <br /> 
 <strong>Figure.</strong> Diagram depicting the relation of different prefuse packages and classes to the infovis reference model. Click the image to see a larger version.
</div> 
<ul class="manual"> 
 <li>The <a class="api" href="http://prefuse.org/doc/api/prefuse/data/package-summary.html">prefuse.data</a> package provides <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Table.html">Table</a>, <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Graph.html">Graph</a>, and <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Tree.html">Tree</a> data structures for representing data, providing the <em>data tables</em> of the reference model. Table rows are represented by the <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Tuple.html">Tuple</a> class, while the <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Node.html">Node</a> and <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Edge.html">Edge</a> classes represent the members of graph and tree structures. The Graph and Tree classes are implemented using Table instances to store the node and edge data. These data structures are memory efficient and, as discussed later in the manual, can also be queried for specific data ranges or values. <p>As an advanced feature, prefuse also provides an intepreted expression language. This language can be used to write queries to prefuse data structures and create derived data columns as functions of existing data fields (and thus providing an easy form of <em>data transformations</em>). The expression language is implemented using the classes of the <a class="api" href="http://prefuse.org/doc/api/prefuse/data/%20/package-summary.html">prefuse.data.expression</a> package and textual expressions are parsed by the <a class="api" href="http://prefuse.org/doc/api/prefuse/data/%20/parser/ExpressionParser.html">ExpressionParser</a> class.</p> </li> 
 <li>The <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/package-summary.html">prefuse.data.io</a> package provides classes for reading and writing table, graph, and tree data from formatted files. For tables, <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/CSVTableReader.html">CSV</a> (comma-separated-values) and <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/DelimitedTextTableReader.html">delimited text</a> (tab-delimited, pipe-delimited, etc) files are supported. For network structures, the XML-based <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/GraphMLReader.html">GraphML</a> and <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/TreeMLReader.html">TreeML</a> file formats are supported. The <a class="api" href="http://prefuse.org/doc/api/prefuse/data/io/sql/package-summary.html">prefuse.data.io.sql</a> package provides facilities for issuing queries to a SQL database and then returning the result within a prefuse <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Table.html">Table</a>. Appropriately structured tables returned from a database can also be used as the node and edge tables in a graph or tree.</li> 
 <li>A <em>visual abstraction</em> of a data set can be created by adding the data to the prefuse <a class="api" href="http://prefuse.org/doc/api/prefuse/Visualization.html">Visualization</a> class. This creates a special data structure that includes the original data but also introduces new visualization-specific data fields, such as x,y coordinates, and color, size, and font values. For any backing <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Tuple.html">Tuple</a>, <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Node.html">Node</a>, or <a class="api" href="http://prefuse.org/doc/api/prefuse/data/Edge.html">Edge</a> added to the visualization, corresponding <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/VisualItem.html">VisualItem</a> instances are created. VisualItems provide access to both the visual attributes and the underlying data values. <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/NodeItem.html">NodeItem</a> and <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/EdgeItem.html">EdgeItem</a> are VisualItem instances that also provide access to a backing graph structure.</li> 
 <li>Specific <em>visual mappings</em> are provided by <a class="api" href="http://prefuse.org/doc/api/prefuse/action/Action.html">Action</a> modules. These are independent processing modules for setting item visibility, computing layouts, assigning color values, and any number of other processing tasks over the <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/VisualItem.html">VisualItem</a> instances in a <a class="api" href="http://prefuse.org/doc/api/prefuse/Visualization.html">Visualization</a>. The <a class="api" href="http://prefuse.org/doc/api/prefuse/action/package-summary.html">prefuse.action</a> package and its sub-packages provide a rich library of Action components for layout, visual encodings, distortion (e.g., fisheye views), and animation. Custom visualizations often involve creating new Action subclasses to provide application-specific processing tasks.</li> 
 <li>The actual appearance of <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/VisualItem.html">VisualItem</a> instances are determined by <a class="api" href="http://prefuse.org/doc/api/prefuse/render/Renderer.html">Renderer</a> modules. Renderers are responsible for drawing items and computing item bounds (how much space an item takes up on the screen). Prefuse provides Renderers for drawing various shapes, labels, and images. Furthermore, the Renderer interface is quite simple (just three methods), easing the process of creating custom renderers. Which Renderer to use for a given VisualItem is determined by a <a class="api" href="http://prefuse.org/doc/api/prefuse/render/RendererFactory.html">RendererFactory</a>, which is asked for the appropriate Renderer each time a VisualItem is to be drawn to the screen.</li> 
 <li><em>Interactive views</em> are provided by the <a class="api" href="http://prefuse.org/doc/api/prefuse/Display.html">Display</a> component, which acts as a camera onto the contents of a <a class="api" href="http://prefuse.org/doc/api/prefuse/Visualization.html">Visualization</a>. The Display draws all the items within its current view, and can be panned, zoomed, and rotated as desired. A single Visualization can be associated with multiple Display instances, enabling different multi-view configurations, including overview + detail views and small multiples displays. Display instances are first-class user interface components, and can be added into Java applications and applets.</li> 
 <li>Each Display also supports any number of interactive <a class="api" href="http://prefuse.org/doc/api/prefuse/controls/Control.html">Controls</a>, which process mouse or keyboard actions on the Display and on individual <a class="api" href="http://prefuse.org/doc/api/prefuse/visual/VisualItem.html">VisualItems</a>. The <a class="api" href="http://prefuse.org/doc/api/prefuse/controls/package-summary.html">prefuse.controls</a> package provides pre-built controls for selecting focus items, dragging items around, and panning, zooming, and rotating the Display view. Furthermore, it is easy to create custom Controls by subclassing the <a class="api" href="http://prefuse.org/doc/api/prefuse/controls/ControlAdapter.html">ControlAdapter</a> class.</li> 
 <li>Finally, interaction can also occur through the use of the dynamic query bindings provided in the <a class="api" href="http://prefuse.org/doc/api/prefuse/data/query/package-summary.html">prefuse.data.query</a> package. These classes create a binding between a column of table data and an expression <a class="api" href="http://prefuse.org/doc/api/prefuse/data/%20/Predicate.html">Predicate</a> (or query) over that column. These bindings can automatically generate appropriate user interface components (e.g., sliders, radio buttons, check boxes, text search boxes, etc) for directly manipulating the settings of the query. As seen later in the example application below, this can be used to interactively filter for data items of interest.</li> 
</ul> 
<div>
 The information visualization reference model was developed in the Ph.D. thesis work of Ed Chi, under the name of the 
 <em>data state model</em>. Chi showed that the framework successfully modeled a wide array of visualization applications and later showed that the model was functionally equivalent to the 
 <em>data flow model</em> used in existing graphics toolkits such as VTK. In their book 
 <em>Readings in Information Visualization: Using Vision to Think</em>, Card, Mackinlay, and Shneiderman present their own interpretation of this pattern, dubbing it the 
 <em>information visualization reference model</em>.
</div></div></body></html>